---
---
<!doctype html>
<html lang="en">
  <head>
    {% include head.html %}
  </head>
  <body>
    <header id="default-header">
        <a href="{{ '/' | relative_url }}"><img src="{{ '/assets/img/mqtt-logo-transp.svg' | relative_url }}" id="mqtt-logo-header" class="float-left"></a>
    </header>
    <nav id="mobile-nav">
      {% include mobile-nav.html %}
    </nav>
    <nav id="main-nav" class="default-nav float-left">
      {% include nav.html %}
    </nav>
    <main>
      {{ content }}
    {% include footer.html %}
    </main>
  </body>
  
  <!-- Sticky navigation hides an offset for anchor link targets. This script resolves this issue -->
  <script>
    jQuery(document).ready(function($) {
  
      // set a variable for the anchor link which is the location.hash
      var anchorLink = $(window.location.hash);
        // test to see if the link is a anchor link, if not the length will have no value, this is done to avoid js errors on non anchor links
        if ( anchorLink.length ) {
          // set an element as the fixed entity, header in this case and get its height
          var offsetSize = $("header").innerHeight();
          // fire the animation from the top of the page to the anchor link offsetting by the fixed elements height, the number is the speed of the animation
          $("html, body").animate({scrollTop: anchorLink.offset().top - offsetSize }, 500);
        }
    });
    </script>
</html>